<script lang="ts" setup>
import type { DateRange } from 'reka-ui';
import Calendar from './calendar.vue';
import { getLocalTimeZone, today } from '@internationalized/date';

const start = today(getLocalTimeZone());
const end = start.add({ days: 7 });
const dateRange = ref<DateRange>({
  start,
  end,
});

function handleDateChange(value: DateRange) {
  dateRange.value = value;
}
</script>

<template>
  <div class="flex flex-col gap-2">
    <h1 class="text-2xl font-bold">
      排班日期
    </h1>
    <Calendar @update:value="handleDateChange" />
  </div>
</template>
